<template>
  <div class="main">
    <div class="content">
      <div class="content-box">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item>
            <div class="birthday">
              <div class="birthday-title">
                <img style="width: 18px;height: 18px;" src="../../images/star.png" alt />
                <span>主体性质</span>
              </div>
              <div class="birthday-option">
                <el-form-item prop="nature">
                  <el-select clearable :disabled="dataValShow" v-model="ruleForm.nature" class="elinput-left" placeholder="请选择主体性质" @change="natureChange">
                    <el-option v-for="item in natureList" :key="item.dictLabel" :label="item.dictLabel" :value="dataValShow? ruleForm.nature:item.dictValue"></el-option>
                    <!-- <el-option
                      v-for="item in natureList"
                      :key="item.dictLabel"
                      :label="item.dictLabel"
                      :value="2"
                    ></el-option>-->
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </el-form-item>
          <!-- 商业 -->
          <div v-if="businessShow">
            <el-form-item>
              <div class="birthday">
                <div class="birthday-title">
                  <img style="width: 18px;height: 18px;" src="../../images/star.png" alt />
                  <span>主体名称</span>
                </div>
                <div class="birthday-option">
                  <el-form-item prop="name">
                    <el-input clearable v-model="ruleForm.name" class="elinput-left" placeholder="请输入单位名称" :disabled="dataValShow"></el-input>
                  </el-form-item>
                </div>
              </div>
            </el-form-item>

            <el-form-item>
              <div class="birthday">
                <div class="birthday-title">
                  <img style="width: 18px;height: 18px;" src="../../images/star.png" alt />
                  <span>提供证件类型</span>
                </div>
                <div class="birthday-option">
                  <el-form-item prop="papers">
                    <el-select clearable v-model="ruleForm.papers" class="elinput-left" placeholder="请选择证件类型" prop="nature" :disabled="dataValShow">
                      <el-option v-for="item in cordType" :key="item.value" :label="item.dictLabel" :value="dataValShow? ruleForm.papers:item.dictValue"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </div>
            </el-form-item>

            <div class="upload">
              <el-upload action="#" list-type="picture-card" :auto-upload="true" :on-change="triggerChange" :class="{ hide: hideUpload||dataValShow }" :file-list="permitImg" :http-request="uploadSectionFile">
                <!-- <i slot="default" class="el-icon-plus"></i> -->
                <div class="upload-text">
                  <img src="../../images/uploading.png" alt />
                  <p>点击上传图片</p>
                </div>
                <div slot="file" slot-scope="{file}">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span v-if="!dataValShow" class="el-upload-list__item-delete" @click="handleRemove(file)">
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>

                <div class="upload-hint" v-if="hintShow">请上传图片</div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="permitUrl" alt />
              </el-dialog>
            </div>

            <el-form-item>
              <div class="birthday">
                <div class="birthday-title">
                  <img style="width: 18px;height: 18px;" src="../../images/star.png" alt />
                  <span>统一社会信用代码</span>
                </div>
                <div class="birthday-option">
                  <el-form-item prop="credit">
                    <el-input clearable v-model="ruleForm.credit" class="elinput-left" placeholder="请输入统一信用代码" :disabled="dataValShow"></el-input>
                  </el-form-item>
                </div>
              </div>
            </el-form-item>

            <el-form-item>
              <div class="checkbox">
                <div class="checkbox-title">
                  <img style="width: 18px;height: 18px;" src="../../images/star.png" alt />
                  <span>联系方式</span>
                </div>
                <div class="checkbox-option">
                  <el-form-item prop="linkman">
                    <el-input clearable v-model="ruleForm.linkman" class="elinput-left" placeholder="请输入联系人"></el-input>
                  </el-form-item>
                  <el-form-item prop="mobile">
                    <el-input clearable v-model="ruleForm.mobile" class="elinput-left" placeholder="请输入手机号"></el-input>
                  </el-form-item>
                  <el-form-item prop="landline">
                    <el-input clearable v-model="ruleForm.landline" class="elinput-left" placeholder="请输入单位座机"></el-input>
                  </el-form-item>
                  <el-form-item prop="mailbox">
                    <el-input clearable v-model="ruleForm.mailbox" class="elinput-left" placeholder="请输入邮箱"></el-input>
                  </el-form-item>
                </div>
              </div>
            </el-form-item>
          </div>
          <!-- --------------------- -->

          <!-- 个人 -->
          <div v-if="!businessShow">
            <el-form-item>
              <div class="quality">
                <div class="quality-title">
                  <img style="width: 18px;height: 18px;" src="../../images/star.png" alt />
                  <span>姓名</span>
                </div>
                <div class="quality-option">
                  <el-form-item prop="myName">
                    <el-input @input="optionId=-1" clearable v-model="ruleForm.myName" class="elinput-left" placeholder="请输入权属人姓名" :disabled="dataValShow"></el-input>
                  </el-form-item>
                </div>
              </div>
            </el-form-item>
            <!-- 
            <div class="constraint-term">
              <div
                v-for="(item,index) in optionVale"
                :key="index"
                :class="optionId==item.id? 'constraint-term-item action':'constraint-term-item' "
                @click="nameChang(item)"
              >{{ item }}</div>
            </div>-->

            <el-form-item>
              <div class="quality">
                <div class="quality-title">
                  <img style="width: 18px;height: 18px;" src="../../images/star.png" alt />
                  <span>提供证件类型</span>
                </div>
                <div class="quality-option">
                  <el-form-item prop="Papers">
                    <el-select clearable v-model="ruleForm.myPapers" class="elinput-left" placeholder="请选择主体性质" :disabled="dataValShow">
                      <el-option v-for="item in cordType" :key="item.value" :label="item.dictLabel" :value="dataValShow? ruleForm.myPapers:item.dictValue"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </div>
            </el-form-item>

            <!-- 上传图片 -->
            <div class="uploading">
              <el-upload action="#" list-type="picture-card" :auto-upload="true" :file-list="frontImg" :on-change="frontTrigger" :class="{ hide: frontShow||dataValShow }" :http-request="frontImgUpload">
                <div class="uploading-bg">
                  <img v-show="ruleForm.myPapers!=2" src="../../images/portrait.png" alt />
                  <img v-show="ruleForm.myPapers==2" src="../../images/uploading.png" alt />
                  <p>{{ruleForm.myPapers==2?'上传外籍人士护照':'上传身份证人像面'}}</p>
                </div>
                <div slot="file" slot-scope="{file}">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="frontView(file)">
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span v-if="!dataValShow" class="el-upload-list__item-delete" @click="frontRemove(file)">
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
                <div class="uploading-hint" v-if="hintShow">请上传图片</div>
              </el-upload>
              <el-dialog :visible.sync="frontBigShow">
                <img width="100%" :src="frontUrl" alt style="z-index:999;" />
              </el-dialog>

              <!-- 国徽面 -->
              <el-upload v-show="ruleForm.myPapers!=2" action="#" list-type="picture-card" :auto-upload="true" style="margin-left: 10px;" :file-list="emblemImg" :on-change="emblemTrigger" :class="{ hide: emblemShow||dataValShow }" :http-request="emblemImgUpload">
                <!-- <i slot="default" class="el-icon-plus"></i> -->
                <div class="uploading-bg">
                  <img src="../../images/national-emblem.png" alt />
                  <p>上传身份证国徽面</p>
                </div>
                <div slot="file" slot-scope="{file}">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="emblemView(file)">
                      <i class="el-icon-zoom-in"></i>
                    </span>

                    <span v-if="!dataValShow" class="el-upload-list__item-delete" @click="emblemRemove(file)">
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="emblemBigShow">
                <img width="100%" :src="emblemUrl" alt />
              </el-dialog>
            </div>

            <el-form-item>
              <div class="quality">
                <div class="quality-title">
                  <img style="width: 18px;height: 18px;" src="../../images/star.png" alt />
                  <span>证件号码</span>
                </div>
                <div class="quality-option">
                  <el-form-item>
                    <el-input @input="verifyChange" clearable v-model="ruleForm.IdNum" class="elinput-left" placeholder="请输入证件号码" :disabled="dataValShow"></el-input>
                    <div class="hint" v-if="verifyShow">
                      <img src="../../images/mistake.png" alt />
                      <span>格式错误,请填写18位身份证号码</span>
                    </div>
                  </el-form-item>
                </div>
              </div>
            </el-form-item>

            <el-form-item>
              <div class="quality">
                <div class="quality-title">
                  <img style="width: 18px;height: 18px;" src="../../images/star.png" alt />
                  <span>联系方式</span>
                </div>
                <div class="quality-options">
                  <el-form-item>
                    <el-input @input="mobileChange" clearable v-model="ruleForm.myMobile" class="elinput-left" placeholder="请输入手机号"></el-input>
                    <div class="hint" v-if="mobileShow">
                      <img src="../../images/mistake.png" alt />
                      <span>手机号格式错误，请检查</span>
                    </div>
                  </el-form-item>
                  <el-form-item>
                    <el-input @input="mailboxChange" clearable v-model="ruleForm.myMailbox" class="elinput-left" placeholder="请输入邮箱"></el-input>
                    <div class="hint" v-if="mailboxShow">
                      <img src="../../images/mistake.png" alt />
                      <span>邮箱格式错误，请检查</span>
                    </div>
                  </el-form-item>
                </div>
              </div>
            </el-form-item>
          </div>
          <!-- 地区 -->

          <el-form-item>
            <div class="checkbox">
              <div class="checkbox-title">
                <img style="width: 18px;height: 18px;" src="../../images/star.png" alt />
                <span>所在地区</span>
              </div>
              <div class="checkbox-option">
                <el-form-item prop="province">
                  <el-select clearable v-model="ruleForm.province" class="elinput-left" placeholder="请选择省" @change="provinceChange">
                    <el-option v-for="item in provinceList" :key="item.value" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="cantonal">
                  <el-select clearable v-model="ruleForm.cantonal" class="elinput-left" placeholder="请选择市" @change="cantonalChange">
                    <el-option v-for="item in cantonalList" :key="item.value" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="district">
                  <el-select clearable v-model="ruleForm.district" class="elinput-left" placeholder="请选择区">
                    <el-option v-for="item in districtList" :key="item.value" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="detailed">
                  <el-input clearable v-model="ruleForm.detailed" class="elinput-left" placeholder="请输入详细地址"></el-input>
                </el-form-item>
              </div>
            </div>
          </el-form-item>

          <!-- 提交 -->
          <el-form-item class="submit">
            <el-button class="submit-but2" @click="sub_return()">返回</el-button>
            <el-button type="primary" class="submit-but" @click="submitForm('ruleForm')" v-loading.fullscreen.lock="loading">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="main-their">中国数字人知识产权存证保护平台</div>
  </div>
</template> 
<script >
var client;
import OSS from "ali-oss";
import {
  getDict,
  addSubject,
  getCom,
  getSts,
  maininfo,
  editPul,
  comCard
} from "@/utils/api";
export default {
  name: "businessView",
  components: {},
  data () {
    return {
      loading: false,
      ruleForm: {
        nature: "",
        name: "",
        papers: "",
        credit: "",
        linkman: "",
        mobile: "",
        landline: "",
        mailbox: "",
        province: "",
        cantonal: "",
        district: "",
        detailed: "",
        // 个人
        myName: "",
        myPapers: "",
        IdNum: "",
        myMobile: "",
        myMailbox: ""
      },
      businessShow: true,
      natureList: [],
      cordType: [],
      cordTypes: [],
      // 营业执照
      permitImg: [], //营业执照图片
      permitUrl: "",
      hideUpload: false, //上传框是否显示
      dialogVisible: false,
      provinceList: [],
      cantonalList: [],
      districtList: [],
      frontImg: [], //身份证正面
      frontUrl: "",
      frontShow: false,
      frontBigShow: false,
      emblemImg: [], //国徽面
      emblemUrl: "",
      emblemShow: false,
      emblemBigShow: false,
      rules: {
        nature: [
          { required: true, message: "请输入主体性质", trigger: "change" }
        ],
        name: [
          { required: true, message: "请输入名称", trigger: "change" }
          // { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" }
        ],
        myName: [
          { required: true, message: "请输入名称", trigger: "change" }
          // { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" }
        ],
        papers: [
          { required: true, message: "请选择证件类型", trigger: "change" }
        ],
        credit: [
          { required: true, message: "请输入统一信用代码", trigger: "change" }
        ],
        linkman: [
          { required: true, message: "请输入联系人", trigger: "change" }
        ],
        mobile: [
          { required: true, message: "请输入手机号码", trigger: "change" },
          {
            min: 11,
            max: 11,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        // landline: [
        //   { required: true, message: "请输入单位座机", trigger: "change" }
        // ],
        mailbox: [
          { required: true, message: "请输入邮箱", trigger: "change" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        province: [{ required: true, message: "请选择省", trigger: "change" }],
        cantonal: [{ required: true, message: "请选择市", trigger: "change" }],
        district: [{ required: true, message: "请选择区", trigger: "change" }],
        detailed: [
          { required: true, message: "请输入详细地址", trigger: "change" }
        ]
      },

      // 验证提示
      verifyShow: true,
      mobileShow: true,
      mailboxShow: true,
      optionVale: [],
      optionId: -1,
      // oss凭证
      getOss: {},
      dataValShow: false,
      myId: "",
      hintShow: false
    };
  },
  created () {
    this.init();
    var Val = JSON.parse(localStorage.getItem("name"));
    if (!Val) {
      return false;
    } else {
      this.optionVale = Val;
    }
  },
  watch: {
    "ruleForm.nature": function (newVal) {
      // console.log(newVal);
      var Val = [];
      if (newVal == "1") {
        this.cordTypes.forEach((item, index) => {
          if (index != 2) {
            Val.push(item);
          }
        });
        this.cordType = Val;
      } else {
        this.cordTypes.forEach((item, index) => {
          if (index == 2) {
            Val.push(item);
          }
        });
        this.cordType = Val;
      }
    },
    deep: true,
    immediate: true
  },
  methods: {
    // 初始化数据

    init () {
      // 获取oss数据
      getSts({}, res => {
        client = new OSS({
          region: "oss-cn-beijing",
          accessKeyId: res.data.oss.credentials.accessKeyId,
          accessKeySecret: res.data.oss.credentials.accessKeySecret,
          stsToken: res.data.oss.credentials.securityToken,
          bucket: res.data.bucket
        });
      });

      // 主体字典信息
      getDict({}, res => {
        if (res.code === 200) {
          this.natureList = res.data.nature;
          this.cordTypes = res.data.cordType;
        }
        // console.log("主体字典信息", res);
      });
      // 地区省
      getCom({ pid: "0" }, res => {
        this.provinceList = res.data;
        // res.data.forEach(item => {
        //   this.provinceList.push(item)
        // });
        // console.log("地区省", res, this.provinceList);
      });

      this.initInfo();
    },

    initInfo () {
      // 获取已填主体信息
      maininfo({}, res => {
        console.log("已经填过的主体信息", res);
        if (res.code === 200) {
          if (res.data) {
            if (res.data.id) {
              localStorage.setItem("subjectId", res.data.id);
            }
            this.myId = res.data.id;
            this.dataValShow = true;
            this.ruleForm.nature = res.data.natureId;
            this.ruleForm.province = res.data.provinceId;
            this.provinceChange(res.data.provinceId);
            this.cantonalChange(res.data.cityId);
            this.ruleForm.cantonal = res.data.cityId;
            this.ruleForm.district = res.data.regionId;
            this.ruleForm.detailed = res.data.detail;

            if (res.data.natureId == "1") {
              this.businessShow = false;
              this.ruleForm.myName = res.data.name;
              this.ruleForm.myPapers = res.data.typeId;
              this.frontImg = [{ name: "", url: res.data.cardImgFront }];
              this.frontUrl = res.data.cardImgFront;
              this.emblemImg = [{ name: "", url: res.data.cardImgBack }];
              this.emblemUrl = res.data.cardImgBack;
              this.ruleForm.IdNum = res.data.cardNo;
              this.ruleForm.myMobile = res.data.phone;
              this.ruleForm.myMailbox = res.data.email;
              if (res.data.cardNo) {
                this.verifyShow = false;
              }
              if (res.data.phone) {
                this.mobileShow = false;
              }
              if (res.data.email) {
                this.mailboxShow = false;
              }
            } else {
              this.businessShow = true;
              this.ruleForm.name = res.data.name;
              this.ruleForm.papers = res.data.typeId;
              this.permitImg = [{ name: "", url: res.data.cardImgFront }];
              this.permitUrl = res.data.cardImgFront;
              this.ruleForm.credit = res.data.cardNo;
              this.ruleForm.linkman = res.data.contactName;
              this.ruleForm.mobile = res.data.phone;
              this.ruleForm.landline = res.data.tel;
              this.ruleForm.mailbox = res.data.email;
            }
          } else {
            this.dataValShow = false;
          }
          console.log("你别调用了啊");
        }
      });
    },

    // 上一步，调用父组件中的方法
    lastStep () {
      this.$emit("lastStep");
    },
    submit () {
      this.loading = true;
      if (this.dataValShow) {
        if (this.ruleForm.nature == "1") {
          editPul(
            {
              id: this.myId,
              natureId: this.ruleForm.nature,
              name: this.ruleForm.myName,
              typeId: this.ruleForm.myPapers,
              cardImgFront: this.frontUrl,
              cardImgBack: this.emblemUrl,
              cardNo: this.ruleForm.IdNum,

              phone: this.ruleForm.myMobile,

              email: this.ruleForm.myMailbox,
              provinceId: this.ruleForm.province,
              cityId: this.ruleForm.cantonal,
              regionId: this.ruleForm.district,
              detail: this.ruleForm.detailed
            },
            res => {
              this.loading = false;
              if (res.code === 200) {
                // 缓存名字选项
                this.cacheChange();
                console.log("提交下一步", res);
                // 调用父组件中的方法
                // 调用全局挂载的方法，关闭当前页
                this.$store.dispatch("tagsView/delView", this.$route);
                // 返回上一步路由
                this.$router.go(-1)
              } else {
                this.loading = false;
                this.$message({
                  type: "error",
                  message: res.msg
                });
              }
            }
          );
        } else {
          editPul(
            {
              id: this.myId,
              natureId: this.ruleForm.nature,
              name: this.ruleForm.name,
              typeId: this.ruleForm.papers,
              cardImgFront: this.permitUrl,
              cardNo: this.ruleForm.credit,
              contactName: this.ruleForm.linkman,
              phone: this.ruleForm.mobile,
              tel: this.ruleForm.landline,
              email: this.ruleForm.mailbox,
              provinceId: this.ruleForm.province,
              cityId: this.ruleForm.cantonal,
              regionId: this.ruleForm.district,
              detail: this.ruleForm.detailed
            },
            res => {
              this.loading = false;
              if (res.code === 200) {
                // 调用全局挂载的方法，关闭当前页
                this.$store.dispatch("tagsView/delView", this.$route);
                // 返回上一步路由
                this.$router.go(-1)
                console.log("提交下一步", res);
              } else {
                this.$message({
                  type: "error",
                  message: res.msg
                });
              }
            }
          );
        }
      } else {
        if (this.ruleForm.nature == "1") {
          addSubject(
            {
              natureId: this.ruleForm.nature,
              name: this.ruleForm.myName,
              typeId: this.ruleForm.myPapers,
              cardImgFront: this.frontUrl,
              cardImgBack: this.emblemUrl,
              cardNo: this.ruleForm.IdNum,
              contactName: "",
              phone: this.ruleForm.myMobile,
              tel: "",
              email: this.ruleForm.myMailbox,
              provinceId: this.ruleForm.province,
              cityId: this.ruleForm.cantonal,
              regionId: this.ruleForm.district,
              detail: this.ruleForm.detailed
            },
            res => {
              this.loading = false;
              if (res.code === 200) {
                // 缓存名字选项
                this.cacheChange();
                console.log("提交下一步", res);
                // 调用父组件中的方法
                this.$emit("handleChange");
              } else {
                this.loading = false;
                this.$message({
                  type: "error",
                  message: res.msg
                });
              }
            }
          );
        } else {
          addSubject(
            {
              natureId: this.ruleForm.nature,
              name: this.ruleForm.name,
              typeId: this.ruleForm.papers,
              cardImgFront: this.permitUrl,
              cardNo: this.ruleForm.credit,
              contactName: this.ruleForm.linkman,
              phone: this.ruleForm.mobile,
              tel: this.ruleForm.landline,
              email: this.ruleForm.mailbox,
              provinceId: this.ruleForm.province,
              cityId: this.ruleForm.cantonal,
              regionId: this.ruleForm.district,
              detail: this.ruleForm.detailed
            },
            res => {
              this.loading = false;
              if (res.code === 200) {
                this.$emit("handleChange");
                console.log("提交下一步", res);
              } else {
                this.$message({
                  type: "error",
                  message: res.msg
                });
              }
            }
          );
        }
      }
    },
    sub_return () {
      // 调用全局挂载的方法，关闭当前页
      this.$store.dispatch("tagsView/delView", this.$route);
      // 返回上一步路由
      this.$router.go(-1)
    },
    // 提交
    submitForm (formName) {
      let imgShow = false;
      // 判断图片是否有值
      if (this.permitUrl || this.frontUrl) {
        this.hintShow = false;
        imgShow = true;
      } else {
        this.hintShow = true;
      }
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (imgShow) {
            this.submit();
          }
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    // 主体性质值改变
    natureChange (e) {
      this.ruleForm.name = "";
      this.ruleForm.papers = "";
      this.ruleForm.credit = "";
      this.ruleForm.linkman = "";
      this.ruleForm.mobile = "";
      this.ruleForm.landline = "";
      this.ruleForm.mailbox = "";
      this.ruleForm.province = "";
      this.ruleForm.cantonal = "";
      this.ruleForm.district = "";
      this.ruleForm.detailed = "";
      this.ruleForm.myName = "";
      this.ruleForm.myPapers = "";
      this.ruleForm.IdNum = "";
      this.ruleForm.myMobile = "";
      this.ruleForm.myMailbox = "";
      this.hideUpload = false;
      this.permitImg = [];
      this.permitUrl = "";
      this.frontShow = false;
      this.frontImg = [];
      this.frontUrl = "";
      this.emblemShow = false;
      this.emblemImg = [];
      this.emblemUrl = "";

      if (e == "1") {
        this.businessShow = false;
      } else {
        this.businessShow = true;
      }
      // console.log("主体值", e, this.ruleForm.myName);
    },
    // 省选择
    provinceChange (e) {
      // console.log("省选择", e);
      this.ruleForm.cantonal = "";
      this.ruleForm.district = "";
      getCom({ pid: e }, res => {
        this.cantonalList = res.data;

        // console.log("市", res);
      });
    },
    // 市
    cantonalChange (e) {
      this.ruleForm.district = "";
      getCom({ pid: e }, res => {
        this.districtList = res.data;
        // console.log("区", res);
      });
    },
    // 营业执照图片上传
    //删除
    handleRemove (file) {
      this.$confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.hideUpload = false;
          this.permitImg = [];
          this.permitUrl = "";
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });

      // console.log("删除", file);
    },
    // 证件查看
    handlePictureCardPreview (file) {
      // console.log("查看", this.images);
      // this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 选择图片
    triggerChange (e) {
      this.permitImg.push(e);
      // this.permitUrl = e.url;
      this.hideUpload = true;
    },
    // 图片上传地址转换
    uploadSectionFile (option) {
      // console.log("图片上传", option.file);
      let uid = option.file.uid;
      let file = option.file;
      const date = new Date().getTime();
      const namearr = file.name.split(".");
      // 定义上传文件的名字+后缀
      const storeAs = uid + "" + date + "." + namearr[1];
      // 调用oss上传接口
      client
        .multipartUpload("carplusgo-info-img/" + storeAs, file)
        .then(response => {
          if (response.res.status === 200) {
            console.log("上传成功", response.res);
            if (response.res.requestUrls[0].indexOf("?") > -1) {
              this.permitUrl = response.res.requestUrls[0].split("?")[0];
            } else {
              this.permitUrl = response.res.requestUrls[0];
            }
          }
        })
        .catch(function (err) {
          console.error("error: ", err);
        });
    },

    // 身份证号校验
    verifyChange () {
      var reg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/;
      if (reg.test(this.ruleForm.IdNum) === true) {
        this.verifyShow = false;
      } else {
        this.verifyShow = true;
      }
    },
    // 手机号校验
    mobileChange () {
      var mobileReg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
      if (mobileReg.test(this.ruleForm.myMobile) === true) {
        this.mobileShow = false;
      } else {
        this.mobileShow = true;
      }
    },
    // 邮箱校验
    mailboxChange () {
      var mailboxReg = /^[0-9a-zA-Z]+([.-_]*[0-9a-zA-Z]+)*@([0-9a-zA-Z]+[-_]*[0-9a-zA-Z]+.)+[0-9a-zA-Z]{2,6}$/;
      if (mailboxReg.test(this.ruleForm.myMailbox) === true) {
        this.mailboxShow = false;
      } else {
        this.mailboxShow = true;
      }
    },
    // 身份证正面图片
    //删除
    frontRemove (file) {
      this.$confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.frontShow = false;
          this.frontImg = [];
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });

      // console.log("删除", file);
    },
    // 查看
    frontView (file) {
      // console.log("查看");
      this.frontBigShow = true;
    },
    // 选择图片
    frontTrigger (e) {
      this.frontImg.push(e);
      this.frontShow = true;
    },

    // 身份证图片上传地址转换
    frontImgUpload (option) {
      // console.log("图片上传", option.file);
      let uid = option.file.uid;
      let file = option.file;
      const date = new Date().getTime();
      const namearr = file.name.split(".");
      // 定义上传文件的名字+后缀
      const storeAs = uid + "" + date + "." + namearr[1];
      // 调用oss上传接口
      client
        .multipartUpload("carplusgo-info-img/" + storeAs, file)
        .then(response => {
          if (response.res.status === 200) {
            console.log("上传成功", response.res);
            if (response.res.requestUrls[0].indexOf("?") > -1) {
              this.frontUrl = response.res.requestUrls[0].split("?")[0];
            } else {
              this.frontUrl = response.res.requestUrls[0];
            }
          }

          // this.verification(this.frontUrl,'front')

        })
        .catch(function (err) {
          console.error("error: ", err);
        });
    },
    // 证件照验证
    verification (url, type) {
      console.log("证件照验证", url, type);
      comCard({ cardImg: url, type: type }, res => {
        console.log(res);
      });
    },
    // 身份证国徽图片
    //删除
    emblemRemove (file) {
      this.$confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.emblemShow = false;
          this.emblemImg = [];
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });

      // console.log("删除", file);
    },
    // 查看
    emblemView (file) {
      // console.log("查看");
      this.emblemBigShow = true;
    },
    // 选择图片
    emblemTrigger (e) {
      this.emblemImg.push(e);
      this.emblemUrl = e.url;
      this.emblemShow = true;
    },

    // 图片上传地址转换
    emblemImgUpload (option) {
      // console.log("图片上传", option.file);
      let uid = option.file.uid;
      let file = option.file;
      const date = new Date().getTime();
      const namearr = file.name.split(".");
      // 定义上传文件的名字+后缀
      const storeAs = uid + "" + date + "." + namearr[1];
      // 调用oss上传接口
      client
        .multipartUpload("carplusgo-info-img/" + storeAs, file)
        .then(response => {
          if (response.res.status === 200) {
            console.log("上传成功", response.res);
            if (response.res.requestUrls[0].indexOf("?") > -1) {
              this.emblemUrl = response.res.requestUrls[0].split("?")[0];
            } else {
              this.emblemUrl = response.res.requestUrls[0];
            }
          }
        })
        .catch(function (err) {
          console.error("error: ", err);
        });
    },

    // 点击选择的姓名
    nameChang (e) {
      this.ruleForm.myName = e;
      console.log(e);
    },
    cacheChange () {
      var num = this.optionVale.indexOf(this.ruleForm.myName);
      if (num != -1) {
        this.optionVale.splice(num, 1);
        this.optionVale.unshift(this.ruleForm.myName);
        localStorage.setItem("name", JSON.stringify(this.optionVale));
      } else {
        this.optionVale.unshift(this.ruleForm.myName);
        localStorage.setItem("name", JSON.stringify(this.optionVale));
      }
    }
  }
};
</script>

<style scoped lang="scss">
:deep .hide .el-upload--picture-card {
  display: none;
}
.main {
  width: 100%;
  // max-width: 1920px;
  // min-width: 1440px;
  min-height: 70vh;
  background-color: #ebf1fb;
  padding-bottom: 32px;
  position: relative;
  margin: auto;

  // outline: 2px solid yellow;

  &-their {
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: #999999;
    position: absolute;
    bottom: 28px;
  }
}
.content {
  // max-width: 1920px;
  // min-width: 1440px;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 145px;
  margin-top: 30px;
  // outline: 2px solid red;

  &-box {
    width: 1400px;
    margin: 0 auto;
    background-color: #fff;
    padding: 70px 100px 66px 0px;
    &-head {
      margin-bottom: 30px;
      display: flex;
      align-items: center;
      &-frame {
        width: 5px;
        height: 18px;
        background-color: #3a7bd8;
      }
      &-text {
        margin-left: 10px;
        font-size: 20px;
        font-weight: 500;
        color: #000000;
      }
    }
  }
}
.birthday {
  display: flex;
  align-items: center;
  &-title {
    width: 150px;
    height: 46px;
    // outline: 2px solid red;
    text-align: right;
    font-size: 16px;
    font-weight: 500;
    color: #333333;
  }
  &-option {
    height: 46px;
    // outline: 2px solid blue;
    margin-left: 20px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

.checkbox {
  display: flex;
  // outline: 2px solid red;
  margin-bottom: -20px;
  &-title {
    width: 150px;
    text-align: right;
    font-size: 16px;
    font-weight: 500;
    color: #333333;
  }
  &-option {
    flex: 1;
    // outline: 2px solid blue;
    margin-left: 20px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

.upload {
  margin-left: 270px;
  margin-bottom: 20px;
  position: relative;
  &-text {
    width: 214px;
    height: 136px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    > img {
      width: 74px;
      height: 52px;
    }
    > p {
      font-size: 16px;
      font-weight: 400;
      color: #3a7bd8;
      margin-top: 20px;
    }
  }
  &-hint {
    position: absolute;
    bottom: -10px;
    color: #f56c6c;
    font-size: 12px;
  }
}

.elinput-left {
  width: 482px !important;
  height: 46px !important;
  margin-right: 20px;
  //  margin-bottom: 20px;
}

.submit {
  margin-top: 80px;
  display: flex;
  justify-content: center;
  &-but {
    width: 414px;
    height: 66px;
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    background: linear-gradient(135deg, #3b7ad8, #10a3e4);
    outline: none;
  }
  &-but2 {
    width: 414px;
    height: 66px;
    color: #000;
    font-size: 20px;
    font-weight: 400;
    // background: linear-gradient(135deg, #3b7ad8, #10a3e4);
    outline: none;
  }
}

:deep .el-input__inner {
  border-radius: 0px;
  height: 46px;
}
:deep .el-form-item {
  margin-bottom: 20px;
}
:deep .el-form-item:nth-child(6) {
  margin-bottom: 0px;
  // border: 1px solid red;
}

:deep .el-upload--picture-card {
  width: 214px;
  height: 136px;
  line-height: 0px;
}
:deep .el-upload-list__item {
  width: 214px;
  height: 136px;
  // outline: 1px solid red;
}

.quality {
  display: flex;
  &-title {
    width: 150px;
    height: 46px;
    text-align: right;
    font-size: 16px;
    font-weight: 500;
    color: #333333;
    // outline: 2px solid blue;
  }
  &-option {
    margin-left: 20px;
    // display: flex;
    // flex-wrap: wrap;
    // margin-right: 10px;
    // outline: 2px solid red;
    margin-bottom: -20px;
  }
  &-options {
    flex: 1;
    margin-left: 20px;
    display: flex;
    flex-wrap: wrap;
  }
}
.constraint-term {
  width: 60%;
  margin-bottom: 10px;
  padding-left: 270px;
  // outline: 2px solid red;
  display: flex;
  flex-wrap: wrap;
  &-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 34px;
    border: 1px solid #3a7bd8;
    background: rgba(58, 123, 216, 0.1);
    font-size: 16px;
    font-weight: 400;
    color: #3a7bd8;
    margin: 0 10px 10px 0;
    cursor: pointer;
  }
}
.action {
  color: #fff;
  background-color: #3a7bd8;
}
.hint {
  position: absolute;
  width: 100%;
  height: 20px;
  line-height: 8px;
  display: flex;
  align-items: center;
  color: #ff0000;
  font-size: 14px;
  font-weight: 400;
  margin-left: 20px;
  // outline: 2px solid red;
  left: -20px;
  background: #fff;
  z-index: 9;
  padding-left: 20px;
  > img {
    width: 14px;
    height: 14px;
    margin-right: 5px;
  }
}
// .checkbox {
//   display: flex;

//   &-title {
//     width: 150px;
//     text-align: right;
//     font-size: 16px;
//     font-weight: 500;
//     color: #333333;
//   }
//   &-option {
//     flex: 1;
//     margin-left: 20px;
//     display: flex;
//     justify-content: flex-start;
//     flex-wrap: wrap;
//   }
// }
.uploading {
  margin-left: 270px;
  margin-bottom: 20px;
  display: flex;
  position: relative;
  &-bg {
    width: 214px;
    height: 136px;
    display: flex;
    flex-direction: column;
    align-items: center;

    > img {
      width: 108px;
      height: 59px;
      margin-top: 28px;
      border: 1px dashed #c0ccda;
    }
    > p {
      font-size: 16px;
      font-weight: 400;
      color: #3a7bd8;
      margin-top: 15px;
    }
  }
  &-hint {
    position: absolute;
    bottom: -10px;
    color: #f56c6c;
    font-size: 12px;
  }
}
</style>
